<!-- 用户编辑弹窗 -->
<template>
  <el-dialog width="680px" :visible="visible" :lock-scroll="false" :destroy-on-close="true"
    custom-class="ele-dialog-form" :title="isUpdate?'编辑学生':'新增学生'" @update:visible="updateVisible">
    <el-form ref="form" :model="form" :rules="rules" label-width="90px">
      <el-row :gutter="15">
        <el-col :sm="12">
          <el-form-item label="姓名:" prop="name">
            <el-input clearable :maxlength="20" v-model="form.name" placeholder="请输入用户姓名" />
          </el-form-item>
        </el-col>
        <el-col :sm="12">
          <el-form-item label="所属学校:" prop="schoole_id">
            <el-select style="width:100%" clearable v-model="form.schoole_id" :disabled='isUpdate'
              placeholder="请输入所属学校">
              <el-option :value="item.id" :label="item.title" v-for="(item,index) in schoolList" :key="index" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="12">
          <el-form-item label="学号:" prop="student_no">
            <el-input clearable :maxlength="20" v-model="form.student_no" placeholder="请输入学号" />
          </el-form-item>
        </el-col>
        <el-col :sm="12">
          <el-form-item label="年级:" prop="grade_id">
            <el-select style="width:100%" clearable v-model="form.grade_id" placeholder="请输入年级">
              <el-option :value="item.id" :label="item.title" v-for="(item,index) in gradeList" :key="index" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="12">
          <el-form-item label="身份证号:" prop="id_card">
            <el-input clearable :maxlength="18" v-model="form.id_card" placeholder="请输入身份证号" />
          </el-form-item>
        </el-col>
        <el-col :sm="12">
          <el-form-item label="班级:" prop="class_id">
            <el-select style="width:100%" clearable v-model="form.class_id" placeholder="请输入班级">
              <el-option :value="item.id" :label="item.title" v-for="(item,index) in classList" :key="index" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="12">
          <el-form-item label="性别:" prop="gender">
            <el-select clearable class="ele-block" v-model="form.gender" placeholder="请选择性别">
              <el-option label="男" :value="1" />
              <el-option label="女" :value="2" />
              <el-option label="未知" :value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="12">
          <el-form-item label="紧急联系人:" prop="relatives_phone">
            <el-input clearable type="tel" v-model="form.relatives_phone" placeholder="请输入手机号码" />
          </el-form-item>
        </el-col>
        <el-col :sm="12">
          <el-form-item label="电话:" prop="phone">
            <el-input clearable type="tel" v-model="form.phone" placeholder="请输入手机号码" />
          </el-form-item>
        </el-col>
        <el-col :sm="12">
          <el-form-item label="设备IMEI:" prop="imei">
            <el-input clearable v-model="form.imei" placeholder="请输入设备IMEI" />
          </el-form-item>
        </el-col>
        <el-col :sm="12">
          <el-form-item label="头像：" prop="avatar">
            <uploadImage :limit="1" v-model="form.avatar"></uploadImage>
          </el-form-item>
        </el-col>
        <el-col :sm="12">
          <el-form-item label="SIM卡号:" prop="sim_no">
            <el-input clearable v-model="form.sim_no" placeholder="请输入SIM卡号" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消
      </el-button>
      <el-button type="primary" :loading="loading" @click="save">确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import validate from 'ele-admin/packages/validate';
  import uploadImage from '@/components/uploadImage';

  export default {
    name: 'UserEdit',
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      data: Object,
      streets_code: String
    },
    components: {
      uploadImage
    },
    data() {
      return {
        // 表单数据
        form: Object.assign({
          status: 1
        }, this.data),
        // 表单验证规则
        rules: {
          name: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }],
          imei: [{
            required: true,
            message: '请输入imei设备码',
            trigger: 'blur'
          }],
          schoole_id: [{
            required: true,
            message: '请输入学校',
            trigger: 'blur'
          }],
          grade_id: [{
            required: true,
            message: '请选择年级',
            trigger: 'blur'
          }],
          class_id: [{
            required: true,
            message: '请选择班级',
            trigger: 'blur'
          }],
          id_card: [{
            pattern: /\d{17}(\d|X)$/,
            message: '身份证号格式不正确,18位',
            trigger: 'blur'
          }],
          relatives_phone: [{
            pattern: validate.phone,
            message: '手机号格式不正确',
            trigger: 'blur'
          }],
          phone: [{
            pattern: validate.phone,
            message: '手机号格式不正确',
            trigger: 'blur'
          }],
          sim_no: [{
            pattern: validate.phone,
            message: 'SIM卡号格式不正确,11位',
            trigger: 'blur'
          }],

          // avatar: [
          //   {required: true, message: '请上传头像', trigger: 'blur'}
          // ],

        },
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false,

        schoolList: [],
        gradeList: [],
        classList: [],
      };
    },
    watch: {
      data() {
        if (this.data) {
          this.form = this.data;
          this.isUpdate = true;
        } else {
          this.form = {};
          this.isUpdate = false;
        }
      },
      // streets_code() {
      //   this.getSchoolList()
      // },
      'form.schoole_id': {
        handler: function() {
          this.getGradeList()
        },
        deep: true
      },
      'form.grade_id': {
        handler: function() {
          this.getClassList()
        },
        deep: true
      }
    },
    mounted() {
      this.getSchoolList()
    },
    methods: {
      getSchoolList() {
        this.$http.get("/schoole/index", {
            params: {
              page: 1,
              limit: 999,
            }
          }).then(res => {
            this.schoolList = res.data.data;
          })
          .catch(e => {
            this.$message.error(e.message);
          });
      },
      // getSchoolList() {
      //   this.$http
      //     .get("/user/getSchoolList", { params: { streets_code: this.streets_code } })
      //     .then(res => {
      //       this.schoolList = res.data.data;
      //     })
      //     .catch(e => {
      //       this.$message.error(e.message);
      //     });
      // },
      getGradeList() {
        this.$http
          .get("/student/getGrade", {
            params: {
              schoole_id: this.form.schoole_id
            }
          })
          .then(res => {
            this.gradeList = res.data.data;
          })
          .catch(e => {
            this.$message.error(e.message);
          });
      },
      getClassList() {
        this.$http
          .get("/student/getClass", {
            params: {
              grade_id: this.form.grade_id,
              schoole_id: this.form.schoole_id
            }
          })
          .then(res => {
            this.classList = res.data.data;
          })
          .catch(e => {
            this.$message.error(e.message);
          });
      },
      /* 保存编辑 */
      save() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            let idRule = /\d{17}(\d|X)$/.test(this.form.id_card)
            if (this.form.id_card && !idRule) {
              return false
            }
            let rephoneRule = /^1\d{10}$/.test(this.form.relatives_phone)
            if (this.form.relatives_phone && !rephoneRule) {
              return false
            }
            let phoneRule = /^1\d{10}$/.test(this.form.phone)
            if (this.form.phone && !phoneRule) {
              return false
            }
            let sim_noRule = /^1\d{10}$/.test(this.form.sim_no)
            if (this.form.sim_no && !sim_noRule) {
              return false
            }
            this.loading = true;
            this.$http.post('/student/edit', this.form).then(res => {
              this.loading = false;
              if (res.data.code === 0) {
                this.$message({
                  type: 'success',
                  message: res.data.msg
                });
                if (!this.isUpdate) {
                  this.form = {};
                }
                this.updateVisible(false);
                this.$emit('done');
              } else {
                this.$message.error(res.data.msg);
              }
            }).catch(e => {
              this.loading = false;
              this.$message.error(e.message);
            });
          } else {
            return false;
          }
        });
      },
      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
        if (!value) {
          this.$emit('done');
        }
      },


    }
  }
</script>

<style scoped>
</style>
